<template>
  <div class="app-container home dashboard-editor-container">
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <router-link :to="'/user/list'">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <span></span>
          <div class="card-panel-description">
            <div class="card-panel-text">用户数量
            </div>
            <span style="font-size:20px">{{list.user}}</span>
          </div>
        </div>
        </router-link>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <router-link :to="'/film/list'" >
        <div class="card-panel" @click="handleSetLineChartData('messages')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">电影数量</div>
            <span style="font-size:20px">{{list.film}}</span>
          </div>
        </div>
        </router-link>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <router-link :to="'/film/arrange'" >
        <div class="card-panel" @click="handleSetLineChartData('purchases')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="textarea" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">排片场次</div>
            <span style="font-size:20px">{{list.arrangement}}</span>
          </div>
        </div>
        </router-link>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('shoppings')">
          <div class="card-panel-icon-wrapper icon-shoppingCard">
            <svg-icon icon-class="monitor" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">影院票房</div>
            <span style="font-size:20px">{{list.boxOffice}}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-card shadow="hover" style="height:470px;">
      <template #header>
        <div class="clearfix">
          <span>每日工作目标</span>
          <el-button @click="dialogFormVisible = true" style="float: right; padding: 3px 0" type="text">添加</el-button>
        </div>
      </template>

      <el-table :data="orderList" style="width:100%;margin-top: -20px">
        <el-table-column width="40">
          <template #default="scope">
            <el-checkbox v-model="scope.row.status"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="目标内容">
          <template #default="scope">
            <div class="todo-item" :class="{'todo-item-del': scope.row.status,}">{{ scope.row.content }}</div>
          </template>
        </el-table-column>
        <el-table-column label="级别" width="500">
          <template slot-scope="props">
            <el-tag type="info" v-if="props.row.type === 1" effect="dark">
              普通
            </el-tag>
            <el-tag type="success" v-if="props.row.type === 2" effect="dark">
              重要
            </el-tag>
            <el-tag type="danger" v-if="props.row.type === 3" effect="dark">
              非常重要
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column width="60">
          <template slot-scope="props">
            <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              @confirm="handleDelete(props.$index)"
              title="确定要删除该工作目标吗？"
            >
              <el-button icon="el-icon-delete" slot="reference"  style="border:none"></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible"  @close="handleClose">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="工作级别" label-width="120px" prop="type">
          <el-select v-model="form.type" placeholder="请选择工作级别">
            <el-option label="普通" value="1"></el-option>
            <el-option label="重要" value="2"></el-option>
            <el-option label="非常重要" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="padding-right: 100px" label="主要内容" label-width="120px" prop="content">
          <el-input :rows="8" type="textarea" v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDailyWork">确 定 保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

  import {findHome} from "@/api/home";
  import {ListDailyWork,AddDailyWork,DeleteDailyWork} from "@/api/worker";


  export default {
    name: 'index',
    data () {
      return {
        rules: {
          type: [
            { required: true, message: '请选择工作级别！', trigger: ['blur','change'] }
          ],
          content: [
            { required: true, message: '请填写主要内容！', trigger: 'blur' }
          ],
        },
        // 版本号
        version: '3.2.1',
        list: [],
        orderList: [],
        form: {
          type: '',
          content: '',
        },
        dialogFormVisible: false,

      }
    },
    mounted () {
      this.load();
      this.loadList()
    },
    methods: {
      goTarget (href) {
        window.open(href, '_blank')
      },

      load() {
        findHome().then(res => {
          if (res.success) {
            this.list = res.data
          }
        })
      },

      loadList() {
        this.loading = true;
        ListDailyWork().then(res => {
          setTimeout(() => {
            this.orderList = res.data
            this.loading = false
          }, 300)
        })
      },

      handleClose(){
        this.$refs.form.resetFields();
      },

      saveDailyWork() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            AddDailyWork(this.form).then(res => {
              this.dialogFormVisible = false
              this.loadList()
              this.$message({
                type: 'success',
                message: '保存成功!'
              });
            })
          } else {
            this.$message.error('请先完善表单相关信息！');
            return false;
          }
        });
      },

      handleDelete(index) {
        console.log(index)
        DeleteDailyWork(this.orderList[index].id).then(res => {
          this.orderList.slice(index, 1)
          this.loadList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      },

    },
  }
</script>

<style scoped lang="scss">
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  .panel-group {
    margin-top: -10px;

    .card-panel-col{
      margin-bottom: 32px;
    }
    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }
        .icon-people {
          background: #40c9c6;
        }
        .icon-message {
          background: #36a3f7;
        }
        .icon-money {
          background: #f4516c;
        }
        .icon-shoppingCard {
          background: #34bfa3
        }
      }
      .icon-people {
        color: #40c9c6;
      }
      .icon-message {
        color: #36a3f7;
      }
      .icon-money {
        color: #f4516c;
      }
      .icon-shoppingCard {
        color: #34bfa3
      }
      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-panel-icon {
        float: left;
        font-size: 48px;
      }
      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;
        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }
        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }
    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>

